<template>
  <div>
    <div style="font-size:18px;">提现管理</div>
    <hr>
    <!-- <br>    -->
    <div v-if="rid!=1" style="padding: 15px 0;display: flex;align-items: center;">
      <div style="width: 400px;"><span style="font-weight: 600;">账户余额：</span><span>{{balance}}</span></div>
      <el-button style="margin-left: 30px;" type="primary" @click="handleApplyCash">申请提现</el-button> 
    </div> 
    <br>  
    <div class="filter-container">
      <el-input :disabled="rid!=1" @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="学校名" v-model="listQuery.param.schoolName">
      </el-input>
      <el-input :disabled="rid!=1" @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName">
      </el-input>
      <el-select clearable style="width: 120px" class="filter-item" v-model="listQuery.param.status" placeholder="审核状态">
        <el-option v-for="item in shenHeOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select clearable style="width: 120px" class="filter-item" v-model="listQuery.param.moneyIf" placeholder="打款状态">
        <el-option v-for="item in payStatusOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>

      <!-- <el-input :disabled="rid!=1" @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName">
      </el-input> -->

      <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.startTime"
            type="date"
            placeholder="选择开始时间">
          </el-date-picker>
      </div>
      <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.endTime"
            type="date"
            placeholder="选择结束时间">
          </el-date-picker>
      </div>

      <el-button class="filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- 表身 -->
    <el-table key='0' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 1500px">
      
      <el-table-column align="center" label="收款人" width="100">
        <template scope="scope">
          <span>{{scope.row.payee}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学校" width="160">
        <template scope="scope">
          <span>{{scope.row.schoolName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账号类型" width="100">
        <template scope="scope">
          <span v-if="scope.row.accountType==1">支付宝</span>
          <span v-if="scope.row.accountType==2">微信</span>
          <span v-if="scope.row.accountType==3">银行卡</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" align="center" label="收款人账号">
        <template scope="scope">
          <span>{{scope.row.payeeAccount}}</span>
        </template>
      </el-table-column>
      <el-table-column width="140px" align="center" label="提款金额">
        <template scope="scope">
          <span>{{scope.row.withdrawalAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" align="center" label="手续费">
        <template scope="scope">
          <span>{{scope.row.poundage}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="审核状态">
        <!-- <template scope="scope">
          <span style='color:red;' class="link-type" @click='handleChangePoint(scope.row)'>{{scope.row.checkStatus}}</span>
        </template> -->
        <template scope="scope">
          <el-tag v-if="scope.row.status==1" type="warning">审核中</el-tag>
          <el-tag v-if="scope.row.status==2" type="success">已通过</el-tag>
          <el-tag v-if="scope.row.status==3" type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="120" align="center" label="审核回复">
        <template scope="scope">
          <span>{{scope.row.reviewReply}}</span>
        </template>
      </el-table-column>
      <el-table-column width="170" align="center" label="申请时间">
        <template scope="scope">
          <span>{{scope.row.createDateName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" align="center" label="是否打款">
        <template scope="scope">
          <el-tag v-if="scope.row.moneyIf==1" type="danger">未打款</el-tag>
          <el-tag v-if="scope.row.moneyIf==2" type="success">已打款</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="打款截图" width="126">
        <template scope="scope">
          <img v-if="scope.row.name" :src="scope.row.payScreenshots" class="avatar">
          <span v-else="!scope.row.image">图片缺失</span>
        </template>
      </el-table-column> -->
      <el-table-column v-if="rid==1" align="center" label="操作" width="200">
        <template scope="scope">
          <el-button size="small" type="warning"  @click="handleChange(scope.row)">修改
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNumber"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    
    <!-- 申请对话框 -->
    <el-dialog title="申请提现" :visible.sync="applyCashDialog">
      <el-form class="small-space" :model="applyForm" label-position="left" label-width="140px" style='max-width: 400px; margin-left:60px;'>
        <el-form-item label="账户余额:">
          <el-input v-model="balance" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="单次最小提现金额:">
          <el-input disabled v-model="minMoney" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="单次最大提现金额:">
          <el-input disabled v-model="maxMoney" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="提现金额:">
          <el-input v-model="applyForm.money" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="账户类型:">
          <el-select clearable v-model="applyForm.accountType" placeholder="请选择">
            <el-option v-for="item in accountOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="applyForm.accountType==3" label="开户行:">
          <el-input v-model="applyForm.openingBank" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="收款人姓名:">
          <el-input v-model="applyForm.name" style="width: 200px;"></el-input>
        </el-form-item>   
        <el-form-item label="收款账号:">
          <el-input v-model="applyForm.account" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="提现费率:">
          <el-input disabled v-model="applyForm.serviceMoney" style="width: 200px;"></el-input>
        </el-form-item>
      </el-form>
    
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyCashDialog =false;">取 消</el-button>
        <el-button type="primary" @click="confirmApply">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改状态话框 -->
    <el-dialog title="申请提现" :visible.sync="changeFormDialog">
      <el-form class="small-space" :model="applyForm" label-position="left" label-width="100px" style='max-width: 400px; margin-left:50px;'>
        <el-form-item label="审核状态:">
          <el-select clearable v-model="changeForm.status" placeholder="请选择">
            <el-option v-for="item in checkOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核回复:">
          <el-input placeholder="请输入审核回复" v-model="changeForm.reviewReply" style="width: 200px;"></el-input>
        </el-form-item> 

        <el-form-item v-if="changeForm.status==2" label="打款状态:">
          <el-select clearable v-model="changeForm.moneyIf" placeholder="请选择">
            <el-option v-for="item in payCashOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> 
        
        <!-- <el-form-item label="打款截图:">
          <el-upload
            class="avatar-uploader"
            action="http://www.chenyekeji.com/21market/image/upload2"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
      </el-form>
    
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeFormDialog =false;">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import $ from 'jquery';
  import Vue from 'vue';  indexOfArray
  import { indexOfArray } from '../../utils'
  import { withdrawListData } from '../../utils/resourse';

  export default {
    data() {
        return {
          list: null,
          total: null,
          listLoading: false,
          listQuery: {
            pageNumber: 1,
            pageSize: 10,
            param: {
              startTime: null,
              endTime: null,
              status: null,
              moneyIf: null,
              schoolName: '',
              shopName: '',
            },
          },
          deleteForm: {
            id: '',
            reason: '',
            status: ''
          },
          shenHeOptions: [
            {id: 1, name: "审核中"},
            {id: 2, name: "同意"},
            {id: 3, name: "拒绝"}
          ],
          payStatusOptions: [
            {id: 1, name: "未打款"},
            {id: 2, name: "已打款"}
          ],
          dialogStatus: '',
          shop: null,
          school: null,
          rid: '',
          userData: null,
          applyCashDialog: false,
          changeFormDialog: false,
          accountOptions: [
            {id: 1,name: '支付宝'},
            {id: 2,name: '微信'},
            {id: 3,name: '银行卡'},
          ],
          checkOptions: [
            {id: 1,name: '审核中'},
            {id: 2,name: '通过'},
            {id: 3,name: '拒绝'},
          ],
          payCashOptions: [
            {id: 1,name: '未打款'},
            {id: 2,name: '已打款'},
          ],
          balance: '',
          applyForm: {
            money: '',
            accountType: null,
            openingBank: '',
            serviceMoney: '',
            name: '',
            account: '',
          },
          changeForm: {
            id: '',
            status: '',
            moneyIf: '',
            reviewReply: '',
          },
          moneyPic: '',
          maxMoney: '',
          minMoney: '',
        };
    },
    created() {
      this.rid = localStorage.getItem('rid');
      this.school = JSON.parse(localStorage.getItem('school'));
      this.shop = JSON.parse(localStorage.getItem('shop'));
      this.userData = JSON.parse(localStorage.getItem('userData'));
      if(this.school){
        this.listQuery.param.schoolName = this.school.schoolName
      }
      if(this.shop){
        this.listQuery.param.shopName = this.shop.shopName
      }
    },
    mounted(){
        var self=this;
        if(this.rid!=1){
          this.getAccountMoney()
        }
        this.getList()
    },
    methods: {
      getAccountMoney() {
        let _data = {
          // userId: this.userData.id,
          shopId: this.shop.shopId
        }
        this.myajax("/account/allBalance",_data,res=>{
            // console.log(res)
            if(res.code==1000){
              this.balance = res.data.balance;
              //this.balance = res.data.soldPrice;  //总销售额
              //this.balance = res.data.balance;    //总提现额
            }
        });
      },
      getList(){
        this.myajax("/withdrawal/list",this.listQuery,res=>{
          // console.log(res)
          if(res.code==1000){
            this.list = res.data.list
            this.total = res.data.total
          }
        });
      },
      handleApplyCash() {
        let id = this.shop.shopType
        this.myajax("/setAmount/get/"+id,{},res=>{
          if(res.code==1000){
            // console.log(res)
            this.applyForm.serviceMoney = res.data.serviceMoney
            this.maxMoney = res.data.maxMoney
            this.minMoney = res.data.minMoney
            this.applyCashDialog = true;
          }
        })
      },
      confirmApply() {
        let flag = (this.applyForm.money<=this.balance)
        if(flag){
          let _data = {
              shopId: this.shop.shopId,
              shopType: this.shop.shopType,
              money: this.applyForm.money,
              payee: this.applyForm.name,
              accountType: this.applyForm.accountType||"",
              openingBank: this.applyForm.openingBank,
              payeeAccount: this.applyForm.account,
          }
          if(_data.money&&_data.payee&&_data.accountType&&_data.payeeAccount){
            this.myajax("/account/getMeMoney",_data,res=>{
                if(res.code==1000){
                  this.$message({
                    type: 'success',
                    message: '提交成功',
                    duration: 2000
                  });
                  this.applyCashDialog = false;
                }
            });
          }else{
            this.$message({
              type: 'warning',
              message: '请填完整再提交',
              duration: 2000
            });
          }
        }else{
          this.$message({
            type: 'warning',
            message: '提现金额不能超出账户余额',
            duration: 2000
          });
        }
      },
      handleFilter() {       //条件搜索
        this.listQuery.pageNumber = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNumber = val
        this.getList()
      },
      handleChange(row) {   //修改状态
        console.log(row)
        this.changeForm.id = row.id
        this.changeForm.status = row.status
        this.changeForm.moneyIf = row.moneyIf
        this.changeForm.reviewReply = row.reviewReply
        this.changeFormDialog = true
      },
      confirmChange() {
        let _data = {
          id: this.changeForm.id ,
          status: this.changeForm.status,
          moneyIf: this.changeForm.moneyIf,
          reviewReply: this.changeForm.reviewReply,
          moneyPic: this.moneyPic || null
        }
        this.myajax("/withdrawal/two",_data,res=>{   //确认修改状态
          console.log(res)
          if(res.code==1000){
            let index = indexOfArray(_data.id,this.list,'id')
            this.list[index].status = _data.status
            this.list[index].moneyIf = _data.moneyIf
            this.list[index].reviewReply = _data.reviewReply
            this.$message({
              type: 'success',
              message: '操作成功',
              duration: 2000
            });
            this.changeFormDialog = false
            for(var key in this.changeForm){
              this.changeForm[key] = null
            }
            
          }
          else{
            this.$message({
              type: 'warning',
              message: res.message,
              duration: 2000
            });
            this.changeFormDialog = false
          }
        })
      },
      handleDelete(row) {
        let self = this;
        let index = indexOfArray(row.name,this.list)
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let arr = []
          arr.push(row.id)
          let _data = { ids: arr}
          self.myajax("/withdrawal/delete",_data,res=>{
            console.log(res)
            if(res.code==1000){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
            this.getList()
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.changeForm.img = Vue.prototype.$host + res
        console.log(this.imageUrl)
        console.log(res)
        console.log(this.changeForm.img)

      },
      beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .filter-container {
      padding-bottom: 10px;
    }
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    .avatar {
      width: 90px;
      height: 90px;
      /*border-radius: 50%;*/
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
    }

    .avatar-uploader .el-upload {
    border: 1px dashed #bfcbd9;
    border-radius: 6px;
  }
  .el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 260px;
    height: 120px;
    display: block;
  }
  .el-dialog .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }

</style>
